/* pages/book/book.wxss */
/* 容器样式 */
.book-container {
  display: flex;
  padding: 10rpx;
   background-color: #ffffff;
  flex-direction: column;
  align-items: center;
}
/* 搜索框样式 */
.search-bar {
  margin-top: 10rpx;
  display: flex;
  background-color: #efefef;
  align-items: center;
  border-radius: 20rpx;
  box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
  padding: 10rpx 20rpx;
  margin-bottom: 10rpx;
  width: 600rpx;
  justify-content: space-between; 
  
}

.search-input {
  flex-grow: 1;
  border: none;
  font-size: 28rpx;
  padding: 10rpx;
}

.search-btn {
  background-color: transparent; 
  border: none; 
  padding: 0 20rpx; 
  width: 80rpx !important; 
  display: flex;
  justify-content: flex-end; 
  align-items: center; 
}  
.icon {
  width: 40rpx;
  height: 40rpx;
} 
.box{
  width:100%;
}
.nav{
  float:left;
  background-color: #efefef;
  width:25%;
  height: 1080rpx;

.item{
   width:100%;
    text-align: center;
    height:100rpx;
    line-height: 100rpx;
}
.selected {  
      /* 被选中时的额外样式 */  
      background-color: #ffff;  
      color:#6cb1b2;  
    }
}

.main{
  float:right;
  width:75%;
 
  .books{
    width:100%;
    height:200rpx;
    margin:20rpx;
   position: relative;/* 添加定位，以便子元素可以绝对定位 */  
    image{
      height: 200rpx;
      width:140rpx;
      float:left;
    }

    .bookcontent{
     margin-left: 170rpx;
    
    }
    .bzuozhe{
      color:#8c8c8c;
      font-size: 25rpx;
      padding-top:30rpx;
    }
    .btn{
        width:80rpx;
        height:40rpx;
        border-radius: 20rpx;
        background-color:#bae7e9;
        color:#6cb1b2;
        font-size: 80%;
        position: absolute; /* 绝对定位 */  
        bottom: 40rpx; /* 距离底部20rpx */  
        right: 40rpx; /* 距离右侧20rpx */  
        text-align: center; /* 确保文字在按钮中居中显示 */  
        line-height: 40rpx; /* 设置行高与按钮高度相同，以确保文字垂直居中 */ 
      } 
    }
  }
  


